<template>
  <div class="flow-direction-container">
    <div
      class="table-top-container"
      style="margin-bottom:20px"
    >
      <el-row>
        <el-col :span="20">
          <el-button
            class="border-btn"
            size="mini"
          >导入流向</el-button>
        </el-col>
        <el-col :lg="4">
          <div style="display: flex; justify-content: flex-end">
            <table-cell-setting
              :table-option="tableOption"
              :checked="checkListData"
              @checkList="checkList"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table-list">
      <el-table
        :data="listData"
        header-cell-class-name="table-header"
        border
        style="width: 100%"
      >
        <el-table-column
          v-if="checkListData.indexOf('flowNo') !==-1"
          prop="flowNo"
          label="流水号"
        />
        <el-table-column
          v-if="checkListData.indexOf('sydxsl') !==-1"
          prop="sydxsl"
          label="上游对象数量"
        />
        <el-table-column
          v-if="checkListData.indexOf('zdsl') !==-1"
          label="终端数量"
          prop="zdsl"
        />
        <el-table-column
          v-if="checkListData.indexOf('dlje') !==-1"
          prop="dlje"
          label="代理金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('zxje') !==-1"
          prop="zxje"
          label="终端直销金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('jzdbje') !==-1"
          prop="jzdbje"
          label="兼职大包金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('c1je') !==-1"
          prop="c1je"
          label="第1终端金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('c2je') !==-1"
          prop="c2je"
          label="第2终端金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('c3je') !==-1"
          prop="c3je"
          label="第3终端金额"
        />
        <el-table-column
          v-if="checkListData.indexOf('czr') !==-1"
          prop="czr"
          label="操作人"
        />
        <el-table-column
          v-if="checkListData.indexOf('czsj') !==-1"
          prop="czsj"
          label="操作时间"
        />
        <el-table-column
          v-if="checkListData.indexOf('zt') !==-1"
          prop="zt"
          label="状态"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  setup(props, context) {
    var reactiveData = reactive({
      checkListData: [
        'flowNo',
        'sydxsl',
        'zdsl',
        'dlje',
        'zxje',
        'jzdbje',
        'c1je',
        'c2je',
        'c3je',
        'czr',
        'czsj',
        'zt',
      ],
      tableOption: [
        {
          key: 'flowNo',
          value: '流水号',
        },
        {
          key: 'sydxsl',
          value: '上游对象数量',
        },
        {
          key: 'zdsl',
          value: '终端数量',
        },
        {
          key: 'dlje',
          value: '代理金额',
        },
        {
          key: 'zxje',
          value: '终端直销金额',
        },
        {
          key: 'jzdbje',
          value: '兼职大包金额',
        },
        {
          key: 'c1je',
          value: '第1终端金额',
        },
        {
          key: 'c2je',
          value: '第2终端金额',
        },
        {
          key: 'c3je',
          value: '第3终端金额',
        },
        {
          key: 'czr',
          value: '操作人',
        },
        {
          key: 'drsj',
          value: '导入时间',
        },
        {
          key: 'zt',
          value: '状态',
        },
      ],
      listData: [
        {
          flowNo: 'LSH655434515',
          sydxsl: 20,
          zdsl: 12,
          dlje: 1200,
          zxje: 5543,
          jzdbje: 65565,
          c1je: 5351,
          c2je: 5351,
          c3je: 5351,
          czr: '张三',
          czsj: '2021-12-09',
          zt: '正常',
        },
      ],
    })
    const checkList = (checked) => {
      reactiveData.checkListData = checked
    }

    return {
      ...toRefs(reactiveData),
      checkList,
    }
  },
})
</script>

